<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-body">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" id="tablist" role="tablist">
                    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">公众号设置</a></li>
                    <li role="presentation"><a href="#qrcode" aria-controls="qrcode" role="tab" data-toggle="tab">推广二维码设置</a></li>
                </ul>

                <!-- Tab panes -->
                <form class="form-horizontal" id="form">
                <div class="tab-content">
                    <!--公众号设置-->
                    <div role="tabpanel" class="tab-pane active" id="home">
                        <div class="form-group" ></div>
                        <div class="form-group" >
                            <label id="appIdLabel" class="col-sm-1 control-label">AppID</label>
                            <div class="col-sm-11">
                                <input type="text" class="form-control" name="appId" id="appId" placeholder="" value="${bean.appId!}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label id="appSecretLabel"  class="col-sm-1 control-label">AppSecret</label>
                            <div class="col-sm-11">
                            <input type="text" class="form-control" name="appSecret" id="appSecret" placeholder=""  value="${bean.appSecret!}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label id="tokenLabel" class="col-sm-1 control-label">token</label>
                            <div class="col-sm-11">
                            <input type="text" class="form-control"  name="token" value="${bean.token!}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-1 control-label">aesKey</label>
                            <div class="col-sm-11">
                            <input type="text" class="form-control"  name="aesKey" value="${bean.aesKey!}">
                            </div>
                        </div>
                    </div>
                    <!--推广二维码设置-->
                    <div role="tabpanel" class="tab-pane" id="qrcode">
                        <div class="form-group" ></div>
                        <div class="form-group" >
                            <label class="col-sm-2 control-label" id="backImg">背景图片</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="qrcodeBackImg" id="qrcodeBackImg" value='${bean.qrcodeBackImg!}'>
                                <input id="input-qrcodeBackImg" type="file" class="file-loading btn-sm">
                            </div>
                        </div>
                        <div class="form-group" >
                            <label class="col-sm-2 control-label" id="logoImg">Logo图片</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="qrcodeLogoImg" id="qrcodeLogoImg" value='${bean.qrcodeLogoImg!}'>
                                <input id="input-qrcodeLogoImg" type="file" class="file-loading btn-sm">
                            </div>
                        </div>
                        <div class="form-group" >
                            <div class="col-sm-2" >
                            </div>
                            <div class="col-sm-3" >
                                <img src="" id="qrcodePreview" width="240px" height="288px" title="推广二维码预览"/>
                            </div>
                            <div class="col-sm-7 pull-left">
                                <a href="javascript:;" onclick="getQrcodePreview()" class="btn btn-primary btn-sm pull-left">生成预览图</a>
                            </div>
                        </div>
                    </div>
                </div>
                </form>
                    <div class="modal-footer">
                        <div class="pull-right">
                            <button type="button" class="btn btn-primary btn-sm" onclick="wxsetformSave()"><i class="fa fa-save"></i>保存</button>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">


    var wxsetformSave = function (){
        $("span").remove(".errorClass");
        $("br").remove(".errorClass");
        var status = 1;
        if($("#appId").val()==""){
            $("#appIdLabel").prepend('<span class="errorClass" style="color:red">*appId不能为空</span><br class="errorClass"/>');
            status = 0;
        }
        if($("#appSecret").val()==""){
            $("#appSecretLabel").prepend('<span class="errorClass" style="color:red">*appSecret不能为空</span><br class="errorClass"/>');
            status = 0;
        }
        if($("#token").val()==""){
            $("#tokenLabel").prepend('<span class="errorClass" style="color:red">*token不能为空</span><br class="errorClass"/>');
            status = 0;
        }

        if(status == 0){
            return false;
        }else{
            $.ajax({
                url: '/admin/wx/set/save',
                type: 'post',
                dataType: 'json',
                data: $("#form").serialize(),
                success: function (data) {
                    if (data.code == 0){
                        alertMsg("更新成功","success");
                    }
                }
            });
        }
    }
    
    var getQrcodePreview = function () {
        var qrcodeBackImg = $("#qrcodeBackImg").val();
        var qrcodeLogoImg = $("#qrcodeLogoImg").val();
        if(qrcodeBackImg == ''){
            $("#backImg").prepend('<span class="errorClass" style="color:red">*背景图不能为空</span><br class="errorClass"/>');
            return false;
        }
        if(qrcodeLogoImg == ''){
            $("#logoImg").prepend('<span class="errorClass" style="color:red">*Logo图片不能为空</span><br class="errorClass"/>');
            return false;
        }

        $.ajax({
            url: '/admin/wx/set/getQrcodePreview',
            type: 'post',
            dataType: 'json',
            data: {qrcodeBackImg:qrcodeBackImg,qrcodeLogoImg:qrcodeLogoImg},
            success: function (data) {
                if (data.code == 0){
                    $("#qrcodePreview").attr("src",data.data);
                }
            }
        });


    }


    $(function () {
        $(".file-loading").fileinput({
            allowedFileExtensions: ['jpg','jpeg','gif','bmp','png'],
            uploadUrl: '/admin/wx/set/fileUpload',
            showCaption: false,
            showPreview:false
        }).on('fileuploaded',function (event, data, previewId, index) {
            var res = data.response;
            $("#"+event.target.id).parent().parent().prev().val(res)
        });
    })


</script>